<template>
  <div class="tabs">
    <el-tag v-for="(tag,index) in tags"
     :key="tag.name"
      :closable = "tag.name !== 'home'"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      @click="changeMenu(tag)"
      @close="handleClose(tag, index)"
      size="small"
      >
      {{tag.label}}
    </el-tag>
  </div>
</template>
<script>

import { mapState ,mapMutations } from 'vuex';
export default {
  name: 'CommonTag',
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      tags: state => state.tab.tabsList
    }) 
  },
  methods:{
    ...mapMutations(['coloseTag']),
    //点击tag跳转的功能
    changeMenu(tag){
      // 根据路由名字进行跳转
      this.$router.push({name:tag.name})
    },
    //点击tag删除的功能
    handleClose(item, index){
     //调用store中的mutation
     this.coloseTag(item)
     const length = this.tags.length
     //删除之后的跳转逻辑
     //如果删除不是当前所高亮的标签，不做任何操作
     if(item.name !== this.$route.name) return
     //如果删除是当前所高亮的标签，且是最后一项，高亮往前推一位
     if(index === length){
      this.$router.push({
        name:this.tags[index-1].name
      })
     }else{
      this.$router.push({
        name:this.tags[index].name
      })  
     }
      
     
    }
  }
}
</script>
<style lang="less" scoped>
 .tabs{
  padding:5px;
  .el-tag{
    margin-right: 10px;
    cursor: pointer;
  }
 }
</style>